<template>
	<!-- 拼团详情 -->
	<div class="groupBookingDetail">
		<van-nav-bar 
		title="拼团详情" 
		left-text="返回" 
		right-text="" 
		left-arrow 
		@click-left="retreat" 
		@click-right="onClickRight"
		></van-nav-bar>
		<!-- 内容 -->
		<div class="gb_center">
			<div class="gb_commd">
				<div class="gb_img_top">
					<img src="https://image.soole.com.cn/0001.png" alt="">
				</div>
				<div class="gb_img_center">
					<img :src="commodityData.image_url" alt="">
				</div>
				<div class="gb_text_box">
					<div class="gb_title">
						<p>{{commodityData.name}}</p>
					</div>
					<div class="gb_price" v-for="item in commodityData.repository" :key="item.id">
						<p>拼团价￥{{item.price}}</p>
						<p>拼团包邮</p>
					</div>
					<div class="gb_time">
						<div>
							<p class="tl">还剩</p>
							<div class="tc">
								<!-- <countdown :hours='hours' :minutes='minutes' :seconds='seconds' :color1='1'></countdown> -->
								<div class="pr_time">
									<ul>
										<li class='pr_timing color1'><span>{{hms.hours|stringJoints()}}</span></li>
										<li class='pr_pun'>:</li>
										<li class='pr_timing color1'><span>{{hms.minutes|stringJoints()}}</span></li>
										<li class='pr_pun'>:</li>
										<li class='pr_timing color1'><span>{{hms.seconds|stringJoints()}}</span></li>
									</ul>
								</div> 
							</div>
							<p class="tr">结束</p>
						</div>
					</div>
				</div>
			</div>

			<div class="ts_text">
				<p>还差<span class="item_col"> 1 </span>人可成团，有<span class="item_col">14587</span>人也在团它噢~</p>
			</div>
			<div class="gb_person">
				<div class="gb_person1">
					<div class="gb_person_head">
						<img :src="img_url" alt="">
					</div>
					<div class="gb_person_name">团主</div>
				</div>
				<div class="gb_person2"></div>
			</div>
			<div class="gb_but">
				<!-- <div class="gb_but1" @click="onClickLeft">
					<button class="van-button van-button--default van-button--normal van-button--plain van-button--hairline van-hairline--surround"
					 style="color: #FF1728;">
						<span class="van-button__text">拼团首页</span>
					</button>
				</div> -->
				<router-link to="/groupBookingIndex" tag='div' class="gb_but1">
					<button class="van-button van-button--default van-button--normal van-button--plain van-button--hairline van-hairline--surround"
					 style="color: #FF1728;">
						<span class="van-button__text">拼团首页</span>
					</button>
				</router-link>
				
				<div class="gb_but2" @click="show=true">
					<button class="van-button van-button--default van-button--normal van-button--hairline van-hairline--surround"
					 style="color: rgb(255, 255, 255); background: #FF1728; ">
						<span class="van-button__text">喊人拼团</span>
					 </button>
				</div>
			</div>

		</div>
		
		<!-- 弹出 -->
		<van-popup
		  v-model="show"
		  position="bottom"
		  :style="{ height: '30%' }"
		>
		<div class="fx_box">
			<div class="fx-tiem">
				<div class="pr_time">
					<ul>
						<li class='pr_timing color1'><span>{{hms.hours|stringJoints()}}</span></li>
						<li class='pr_pun'>:</li>
						<li class='pr_timing color1'><span>{{hms.minutes|stringJoints()}}</span></li>
						<li class='pr_pun'>:</li>
						<li class='pr_timing color1'><span>{{hms.seconds|stringJoints()}}</span></li>
					</ul>
				</div>
				<span>后结束</span>
			</div>
			<p class="fx-text">还差<span class="item_col"> 1 </span>人可成团，赶紧喊人参团吧~</p>
			
			<div class="fx_path">
				<div class="fx_path_box">
					<div class="fx_path_img">
						<img src="https://image.soole.com.cn/000518@2x.png" alt="">
					</div>
					
					<p class="fx_path_text">微信好友</p>
				</div>
				<div class="fx_path_box" @click="friendCircle">
					<div class="fx_path_img">
						<img src="https://image.soole.com.cn/0000513@2x.png" alt="">
					</div>
					<p class="fx_path_text">朋友圈</p>
				</div>
				
				<div class="fx_path_box">
					<div class="fx_path_img">
						<img src="https://image.soole.com.cn/0000513@2x.png" alt="">
					</div>
					<p class="fx_path_text">面对面扫码</p>
				</div>
				<div class="fx_path_box">
					<div class="fx_path_img">
						<img src="https://image.soole.com.cn/000517@2x.png" alt="">
					</div>
					
					<p class="fx_path_text">复制链接</p>
				</div>
			</div>
		</div>
		
		</van-popup>
	<loading v-show="bool"></loading>
	</div>
</template>

<script>
	import countdown from '../utl/countdown';
	import loading from '../purchase/loading.vue';
	
	export default {
		data() {
			return {
				gbDate:{
					
				},
				hms:{
					hours: "00",
					minutes: "00",
					seconds: "00"
				},
				img_url:'https://image.soole.com.cn/000e22a9-e240-47c1-a9cd-cc4b68b7cd82',
				maxtime:3600000*12,
				commodityData:{},
				bool:false,//加载
				show:false,//是否弹出
			}
		},
		created(){
			this.getCommdInfo();
		},
		mounted() {
			this.startTimer();
			var appid="wxbcee36ebb42dbb4f";//第三方用户唯一凭证
			var appsecret="1fc810c5f9e186f662be1beebfab6ae9";//第三方用户唯一凭证密钥，即appsecret
			var url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "&secret=" + appsecret;
			this.$axios.get(url).then(res=>{
				console.log(url)
			}).catch(err=>{
				
			})
		},
		methods: {
			//后退
			retreat() {
				if (window.history.length <= 1) {
					this.$router.push({path:'/'})
				} else {
					this.$router.go(-1);
				}
			},
			//
			onClickRight(){
				
			},
			// 商品信息
			async getCommdInfo(){
				this.bool = true;
				let comId = this.$route.query.id
				let params = {
				  goods_id:comId
				};
				const res = await this.$axios.post(this.$api.goodsDetailedData, params);
				
				if (res.success) {
				  this.commodityData = res.data;
				  console.log(res.data)
				} else {
				  this.$toast(res.msg);
				}
				this.bool = false;
			},
			//倒计时
			countDown() {
				let hms = {
					hours: Math.floor(this.maxtime / 60 / 60 % 24),
					minutes: Math.floor(this.maxtime / 60 % 60),
					seconds: Math.floor(this.maxtime  % 60)
				}
				this.hms = hms;
				// var msg = "距离结束还有"+ this.hours +"时"+ this.minutes + "分" + this.seconds + "秒";
				// console.log(this.hms);
			},
			// 设置定时器
			startTimer() {
				this.timer = setInterval(() => {
					this.countDown();
					//判断总的秒数是否小于=0 是则结束定时器
					if (this.maxtime <= 0) {
						clearInterval(this.timer);
						this.timer = null;
					}
					this.maxtime -= 1;
				}, 1000);
			},
			
			//分享微信
			// wxbcee36ebb42dbb4f
			getShareInfo(tit,fxUrl){//如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
			//1fc810c5f9e186f662be1beebfab6ae9
				   // localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
				   console.log(this.wx)
				  wx.config({
				    debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: 'wx56a464621c6314a',         // 必填，公众号的唯一标识，填自己的！
				    timestamp: Date.now(), // 必填，生成签名的时间戳，刚才接口拿到的数据
				    nonceStr: 'qwer'+Date.now(),   // 必填，生成签名的随机串
				    signature: 'qwer'+Date.now(), // 必填，签名，见附录1
				    jsApiList: [
						'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ',  
						'onMenuShareWeibo','onMenuShareQZone','chooseImage',  
						'uploadImage','downloadImage','startRecord','stopRecord',  
						'onVoiceRecordEnd','playVoice','pauseVoice','stopVoice',  
						'translateVoice','openLocation','getLocation','hideOptionMenu',  
						'showOptionMenu','closeWindow','hideMenuItems','showMenuItems',  
						'showAllNonBaseMenuItem','hideAllNonBaseMenuItem','scanQRCode'
				    ]
				  })
				  
				  wx.ready(function () {
				      //分享到朋友圈
				      wx.onMenuShareTimeline({
				        title: tit,   // 分享时的标题
				        link: fxUrl,     // 分享时的链接
				        imgUrl:'https://image.soole.com.cn/003b874e-0841-4d85-bf18-7b43d4c1e922',    // 分享时的图标
				        success: function () {
				          console.log("分享成功");
				        },
				        cancel: function () {
				          console.log("取消分享");
				        }
				      });
				      //分享给朋友
				      wx.onMenuShareAppMessage({
				        title: tit,
				        desc: '这件商品终于优惠了，每件只需10元', 
				        link: fxUrl,
				        imgUrl: 'https://image.soole.com.cn/003b874e-0841-4d85-bf18-7b43d4c1e922',
				        type: '',
				        dataUrl: '', 
				        success: function () {
				          console.log("分享成功");
				        },
				        cancel: function () {
				          console.log("取消分享");
				        }
				      });
				  })
				  
			},
			//分享朋友圈
			friendCircle(){
				//商品图片、时间戳、商品名、价格
				this.$router.push({path:'/sharePal',query:{
					image_url:this.commodityData.image_url,
					maxtime:this.maxtime,
					name:this.commodityData.name,
					price:this.commodityData.repository[0].price
				}})
				// var title = 'VUE项目实现微信分享功能';
				// var url = 'http://img0.imgtn.bdimg.com/it/u=2287644866,1658579566&fm=26&gp=0.jpg';
				// // this.getShareInfo(title,url);
				// this.$toast("待开发")
			}
				
		},
		components: {
			countdown,loading
		}
	}
</script>

<style lang="scss">
	.groupBookingDetail {
		background-color: #fff;
		.item_col {
			color: #FF1728;
		}
		.van-nav-bar{
			background: #fff;
			border-bottom: 1px solid #ebedf0;
			.van-nav-bar__title{
				color:#333333;
			}
			.van-icon{
				color:#333333;
			}
		}
	}
	.gb_center {

		.gb_commd {
			width: 280px;
			height: 340px;
			border-radius: 11px;
			box-shadow: 0px 0px 10px -6px #000;
			margin: 30px auto 18px auto;
			position: relative;
		}

		img {
			height: 100%;
			width: 100%;
		}
// 等待
		.gb_img_top {
			width: 77px;
			position: absolute;
		}
//主图
		.gb_img_center {
			width: 190px;
			height: 190px;
			position: absolute;
			top: 38%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
//文字盒子 倒计时
		.gb_text_box {
			position: absolute;
			width: 100%;
			bottom: 10px;
			width: 100%;
			text-align: center;

			.gb_title {
				font-size: 14px;
				color: #141414;
			}

			.gb_price {
				display: flex;
				justify-content: center;
				margin-top: 4px;
				margin-bottom: 5px;
			}

			.gb_price>p:nth-child(1) {
				font-size: 15px;
				font-weight: bold;
				color: #FC2A4C;
				margin-right: 5px;
			}

			.gb_price>p:nth-child(2) {
				color: #FF1728;
				font-size: 12px;
				border: 1px solid #FF1728;
				padding: 1px 3px;
				border-radius: 4px;

			}

			.gb_time {
				height: 50px;
				background-color: #FF1728;
				border-bottom-left-radius: 16px;
				border-bottom-right-radius: 16px;
				font-size: 14px;
				color: #fff;
				.tc{
					margin: 0 10px;
				}
				.pr_pun{
					color: #fff;
				}

			}

			.gb_time>div {
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				padding-top: 15px;
			}
		}
//提示 
		.ts_text {
			text-align: center;
			font-size: 14px;
			color: #141414;
		}
//拼团人
		.gb_person {
			display: flex;
			justify-content: center;
			margin-top: 26px;

			.gb_person1,
			.gb_person2 {
				width: 48px;
				height: 48px;
				border-radius: 50%;
			}

			.gb_person1 {
				background-color: #ccc;
				margin-right: 20px;
				position: relative;
				.gb_person_head{
					border-radius: 50%;
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
				
			}

			.gb_person_name {
				color: #fff;
				font-size: 11px;
				border-radius: 20px;
				padding: 1px 6px;
				height: 20px;
				background-color: #FF1728;
				position: absolute;
				left: 23%;
				top: 101%;
				transform: translate(-16%, -50%)
			}

			.gb_person2 {
				border: 1px dashed red;
			}
		}
// 按钮
		.gb_but {
			position: fixed;
			display: flex;
			bottom: 0px;
			height: 49px;
			border-top: 1px solid red;
			width: 100%;
			.gb_but1 {
				width: 50%;

			}
			.gb_but2 {
				width: 50%;
			}
			.van-button--hairline{
				width: 100%;
			}
		}


}
.pr_time {
	ul{
		display: flex;
		justify-content: center;
		color: #FFFFFF;
		font-size: 12px;
		
		.pr_pun{
			margin: 0 5px;
			color: #FF1B28;
			font-size: 14px;
		}
		.pr_timing{
			border-radius: 3px;
			width: 20px;
			height: 20px;
			background-color: #FF1B32;
			position: relative;
			span{
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
			}
		}
		.color1{
			background-color: #C0000E;
		}
		.color2{
			 color: #C0000E;
		 }
	}
	
		
}
// 弹窗
.van-popup--bottom {
    bottom: 14px;
    left: 0;
    right: 0;
    width: 92%;
    border-radius: 10px;
    margin: 0 auto;
}
//定时器
.fx_box{
	.fx-tiem{
	display: flex;
	justify-content: center;
	margin-top:27px ;
	.pr_time{
		margin-right: 10px;
	}
}
.fx-text{
	text-align: center;
	color: #141414;
	font-size: 14px;
	margin-top:13px ;
	margin-bottom:30px ;
	
}


.fx_path{
	display: flex;
	justify-content:  space-around;
	
	.fx_path_box{
		width: 25%;
		text-align: center;
	}
	.fx_path_img{
		width: 50px;
		height: 50px;
		margin: 0 auto;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.fx_path_text{
		font-size: 12px;
		margin-top: 7px;
		color: #141414;
	}
}

}
	body {
	    background: #fff;
	    width: 100%;
	}
</style>
